<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="../../d3.js"></script>
<script src="topojson.v1.min.js"></script>
<script>
var width = 500,
    height = 500;
    
var radius = 240;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
    
var projection = d3.geo.orthographic().translate([150,150]);

var path = d3.geo.path().projection(projection);

var div = d3.select("body").append("div");

d3.json("world-50m.json", function(error, world) {
	var feature = svg.append("path")
						.datum(topojson.feature(world, world.objects.land))
						.attr("d", path)
						.attr("fill","steelblue");

	var t = 0;
	d3.timer(function() {
		var s = Math.round(Date.now() / 60);
		if (s != t) {
			t = s;
			var x = s%300;
			projection.clipExtent([[0,0],[x,x]]);
			div.html("剪裁视窗范围：[[0,0][" + x +","+ x + "]]");
			feature.attr("d", path);
		}
	});

});

</script>

